<template>
  <!-- 侧边栏 -->
  <div class="aside">
    <div class="itemAside" v-for="(item,idx1) in asideList" :key="idx1">
      <div class="asideTitBox" @click="clickAside(item)">
        <div class="asideTitle">{{item.title}}</div>
        <div v-if="itemAside.code==item.code" class="asideIcon"><i class="el-icon-caret-right"></i></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    asideList:{
      type:Array,
      default:() =>[]
    },
    itemAside:{
      type: Object,
      default:() =>{}
    },
  },
  data () {
    return {
      
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    clickAside(item){
      this.$emit('handleAside',item)
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.aside{
  width: calc(100% - 20px);
  height: calc(100% - 25px);
  margin: 25px 0 25px 20px;
  overflow-y: auto;
  .itemAside{
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #fff;
    margin: 15px 0;
    .asideTitBox{
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      .asideTitle{
        width: calc(100% - 23px);
        height: 45px;
        line-height: 35px;
        text-align: center;
        padding: 5px;
        border: 1px solid #fff;
        border-radius: 5px;
      }
      .asideIcon{
        padding-left: 5px;
      }
    }
  }
}
</style>